<template>
  <div class="echarts_box" ref="echarts_box"></div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
    },
    itemWidth: {
      type: Number | String,
      default: () => 11,
    },
    itemHeight: {
      type: Number | String,
      default: () => 11,
    },
  },
   computed: {
    ...mapGetters(["echartsColor"]),
  },
  watch: {
    echartsColor: "drawLine", // 数值变化是更新图表
  },
  mounted() {},
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          let array = [];
          for (let i = 0; i < this.data.result.length; i++) {
            var obj = {
              name: this.data.result[i].name,
              type: "bar",
              stack: "总量",
              barMaxWidth: 10,
              barGap: "10%",

              data: this.data.result[i].data,
            };
            array.push(obj);
          }
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var option = {
            color: ["#F6CE54", "#FF8000", "#DF2462"],
            tooltip: {
              axisPointer: {
                type: "shadow",
                textStyle: {
                  color: "#fff",
                },
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "1%",
              top: "10%",
              containLabel: true,
            },
            legend: {
              itemWidth: this.itemWidth,
              itemHeight: this.itemHeight,
              top: "-1%",
              right: "2%",
              textStyle: {
                color: this.echartsColor,
                fontSize: 11,
              },
              // data: ["已办理", "未办理", "已结"],
            },
            calculable: true,
            xAxis: [
              {
                type: "value",
                trigger: "axis",
                axisLine: {
                  lineStyle: {
                    color: "rgba(64,104,149,1)",
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitArea: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  color: this.echartsColor,
                  fontSize: 11,
                },
                // data: xData,
              },
            ],
            yAxis: [
              {
                type: "category",
                splitLine: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(64,104,149,1)",
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  color: this.echartsColor,
                  fontSize: 11,
                },
                splitArea: {
                  show: false,
                },
                data: this.data.xdata,
              },
            ],
            series: array,
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
}
</style>